{% extends 'layout.html' %}
{% block jquerypluginlib %}
    <script type="text/javascript" src="{{ url_for('static',filename='lib/jquery.zTree.v3.4/js/jquery.ztree.all-3.4.min.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static',filename='lib/jquery.zTree.v3.4/css/zTreeStyle/zTreeStyle.css') }}" type="text/css">
    <script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
{% endblock jquerypluginlib %}
{% block main %}
    <script type=text/javascript>
        $(function() {
            var setting = {
                async: {
                    enable: true,
                    url:"/getNodes",
                    autoParam:["id", "name=n", "level=lv","nodeType"],
                    otherParam:{"otherParam":"zTreeAsyncTest"},
                    dataFilter: filter
                },
                callback: {
                    onClick: zTreeOnClick
                }
            };

            function filter(treeId, parentNode, childNodes) {
                if (!childNodes) return null;
                for (var i=0, l=childNodes.length; i<l; i++) {
                    childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
                }
                return childNodes;
            }
            $.fn.zTree.init($("#treeDemo"), setting);

            function zTreeOnClick(event, treeId, treeNode) {
{#                alert(treeNode.tId + ", " + treeNode.name+ ", " + treeNode.nodeType+ ", " + treeNode.id);#}
                $.getJSON('/getNodeInfo',{id:treeNode.id,nodeType:treeNode.nodeType},function(data){
                    resinfo=data['resinfo'];
                    resphoto=data['resphoto'];
                    show_resinfo(resinfo);
                    show_resphoto(resphoto);
                    show_baidu_map(resinfo.ProjectLng,resinfo.ProjectLat,resinfo.CommunityName);

                });
            };

            function show_resphoto(resphoto){
                var str='';
                $.each(resphoto,function(i,item){
                    str+='<img src="'+item.PhotoFile+'" width="400" height="300" />';
                });
                console.log(str);
                $("#dv_ResPhoto").html(str);
            }
            function show_resinfo(resinfo){
                var str='<table>';
                str+='<tr><td>小区</td><td>'+resinfo.CommunityName+'</td></tr>';
                str+='<tr><td>安装地址</td><td>'+resinfo.InstallAddress+'</td></tr>';
                str+='<tr><td>资源类型</td><td>'+resinfo.DeviceType+'</td></tr>';
                str+='<tr><td>资源型号</td><td>'+resinfo.DeviceName+'</td></tr>';
                str+='<tr><td>资产编号</td><td>'+resinfo.AssetNumber+'</td></tr>';
                str+='<tr><td>SN</td><td>'+resinfo.SN+'</td></tr>';
                str+='<tr><td>资源箱体</td><td>'+resinfo.RoomType+'</td></tr>';
                str+='<tr><td>光站端口</td><td>'+resinfo.OSPort+'</td></tr>';
                str+='<tr><td>备注</td><td>'+resinfo.Memo+'</td></tr>';

                str+='</table>';
                $("#dv_ResInfo").html(str);
            }

            function show_baidu_map(lng,lat,comm){
                console.log(lng);
                console.log(lat);
                var map = new BMap.Map("dv_ResMap");            // 创建Map实例
                var point = new BMap.Point(lng, lat);    // 创建点坐标
                map.centerAndZoom(point,18);                     // 初始化地图,设置中心点坐标和地图级别。
                map.enableScrollWheelZoom();                            //启用滚轮放大缩小
                var marker1 = new BMap.Marker(point);  // 创建标注
                map.addOverlay(marker1);              // 将标注添加到地图中
                var opts = {
                    width : 100,     // 信息窗口宽度
                    height: 50    // 信息窗口高度
                    //title : "Hello"  // 信息窗口标题
                }
                var infoWindow1 = new BMap.InfoWindow(comm,opts);
                marker1.addEventListener("click", function(){this.openInfoWindow(infoWindow1);});

            }

        });
    </script>
        <div id="topo">
            <div class="ym-column">
                <div class="ym-col1">
                    <div class="ym-cbox">
                        <h6>资源拓扑列表</h6>
                        <div class="zTreeDemoBackground left">
                            <ul id="treeDemo" class="ztree"></ul>
                        </div>

                    </div>
                </div>
                <div class="ym-col2">
                    <div class="ym-cbox">
                        <div id="dv_ResStatis"></div>
                        <div id="dv_ResMap"></div>
                        <div id="dv_ResPhoto"></div>
                    </div>
                </div>
                <div class="ym-col3 ym-clearfix">
                    <div class="ym-cbox">
                        <div id="dv_ResInfo"></div>
                    </div>
                </div>
            </div>
        </div>
{% endblock main %}